<template>
  <el-dialog :visible.sync="value" :before-close="() => $emit('input', false)">
    <template slot="title">
      <!-- 补单申请 -->
      <span v-if="page==1">申请</span>
      <span v-else>补单申请-{{rowData.subStatus | toConverter('PAYMENT_SUB_STATUS') }}</span>
    </template>
    <el-button type="primary" style="margin-bottom:20px" @click="doGet({action:'toGetThirdStatus'})" v-if="page==1">
      验证三方状态
    </el-button>
    <el-table
      border
      :data="[rowData]"
      v-if="((rowData.status==0 || rowData.status==2) && !rowData.subStatus) || (rowData.subStatus==5 || rowData.subStatus==6  && rowData.status!=3)"
    >
      <el-table-column label="充值时间" prop="amount">
        <template slot-scope="{row}">
          <div>{{row.createDate | toTime}}</div>
        </template>
      </el-table-column>
      <el-table-column label="第三方充值单号" prop="thirdOrderId">
      </el-table-column>
      <el-table-column label="账户名" prop="username">
      </el-table-column>
      <el-table-column label="存款金额" prop="amount"></el-table-column>
      <el-table-column label="补单金额" prop="amount">
        <template slot-scope="{row}">
          <el-input @keyup.enter.native="reqSupplyOrder"
                    v-model="form.amount"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="三方状态" prop="thirdStatus">
        <template slot-scope="{row}">
          {{row.thirdStatus==1?'成功':(row.thirdStatus==0?'待处理':'')}}
        </template>
      </el-table-column>
      <el-table-column label="三方实际金额" prop="thirdAmount">
        <!-- <template slot-scope="{row}">
          {{row.thirdAmount | currency}}
        </template> -->
      </el-table-column>
    </el-table>
    <div v-else-if="(rowData.status==1 || rowData.status==2 )&& rowData.subStatus && rowData.subStatus!=4">
      <div>申请信息</div>
      <el-table border :data="[rowData]">
        <el-table-column label="补单申请时间" prop="sucReqTime">
          <template slot-scope="{row}">
            {{ row.sucReqTime | toTime}}
          </template>
        </el-table-column>
        <el-table-column label="申请人" prop="sucReqOperator"></el-table-column>
        <el-table-column label="审请补单金额" prop="sucReqAmount"></el-table-column>
        <el-table-column label="状态" prop="amount">
          <template slot-scope="{row}">
            {{row.subStatus | toConverter('PAYMENT_SUB_STATUS') }}
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div v-else-if="rowData.status==2 && rowData.subStatus==4">
      <div>操作信息</div>
      <el-table border :data="[rowData]">
        <el-table-column label="拒绝时间" prop="sucReqTime">
          <template slot-scope="{row}">
            {{ row.sucApvTime | toTime}}
          </template>
        </el-table-column>
        <!--<el-table-column label="第三方充值单号" prop="sucReqOperator"></el-table-column>-->
        <el-table-column label="拒绝补单金额" prop="sucReqAmount"></el-table-column>
        <el-table-column label="申请人" prop="sucReqOperator"></el-table-column>
        <el-table-column label="状态" prop="amount">
          <template slot-scope="{row}">
            {{row.subStatus | toConverter('PAYMENT_SUB_STATUS') }}
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-form :model="reqForm" ref="refForm" :rules="rules">
      <div>备注：</div>
      <el-form-item prop="sucReqRemark">
        <el-input
          type="textarea"
          v-model.trim="reqForm.sucReqRemark"
          :disabled="!!rowData.subStatus && rowData.subStatus!=5 && rowData.subStatus!=6"
          @keyup.enter.native="reqSupplyOrder"
        >
        </el-input>
      </el-form-item>
      <el-form-item label="附件截图" v-if="isCheck">
        <div class="img-list">
          <img v-for="item in listImg" @click="openImagDialog(item)" :key="item" :src="item"
               class="image"/>
        </div>
      </el-form-item>
      <el-form-item  prop="reqImg" v-else>
        <span style="font-weight: 700">如申请补单，请必须上传附件截图：</span>
        <editor-image  color="#1890ff" class="req_supply_order editor-upload-btn"
                      :limit="3"
                       :imgList="reqForm.reqImg"
                      @successCBK="imageSuccessCBK"></editor-image>
        <div class="img-container">
          <div class="image" v-for="item in reqForm.reqImg" @click="openImagDialog(item.url)" :key="item.uid">
            <span class="close" @click.stop="deleteImgEle(item.uid)"><i class="el-icon-close icon" ></i></span>
            <img  :src="item.url"/>
          </div>
        </div>
      </el-form-item>
    </el-form>
    <div v-if="rowData.subStatus==2 || rowData.subStatus==3">
      <div>审核信息</div>
      <el-table border :data="[rowData]">
        <el-table-column label="审核时间" prop="sucApvTime">
          <template slot-scope="{row}">
            {{ row.sucApvTime | toTime}}
          </template>
        </el-table-column>
        <el-table-column label="审核人" prop="sucApvOperator"></el-table-column>
        <el-table-column label="审核补单金额" prop="sucApvAmount"></el-table-column>
      </el-table>
    </div>
    <el-form :model="rowData" ref="refForm" :rules="rules" v-if="rowData.subStatus==2 || rowData.subStatus==3">
      <div>备注</div>
      <el-form-item prop="sucReqRemark">
        <el-input @keyup.enter.native="reqSupplyOrder" type="textarea"
                  v-model.trim="rowData.sucApvRemark" :disabled="!!rowData.subStatus"></el-input>
      </el-form-item>
    </el-form>
    <div
      slot="footer"
      class="dialog-footer"
      v-if="((rowData.status==0 || rowData.status==2) && !rowData.subStatus )|| ((rowData.subStatus==5 || rowData.subStatus==6 ) && rowData.status!=3)"
    >
      <!--<el-button @click="rowData.sucReqRemark='';$emit('input', false)" :loading="loading">取 消</el-button>-->
      <el-button type="danger" @click="rejectSupplyOrder" :disabled="!isClick&&page==1">
        拒绝补单
      </el-button>
      <el-button type="warning" @click="reqSupplyOrder" :disabled="!isClick&&page==1">
        申请补单
      </el-button>
    </div>
    <el-dialog :visible.sync="imgDialog" :show-close="false" custom-class="img_detail" append-to-body>
      <img :src="imgUrl" alt="">
    </el-dialog>
  </el-dialog>
</template>

<script>

// services
import { applySingleReorder, getThirdStatus, refusedSingleReorder } from '@/services/api/recharge';

// mixins
import { form, grid } from '@/build';
// components
import EditorImage from '@/components/Tinymce/components/editorImage';

export default {
  name: 'apply-reorder-dialog',
  props: ['value', 'id', 'rowData', 'page', 'isCheck'],
  mixins: [form, grid],
  data() {
    return {
      isClick: false,
      result: {},
      form: {
        id: this.id,
        applyComment: undefined,
        amount: this.rowData.amount,
      },
      reqForm: { // 生情补单form表单
        sucReqRemark: '',
        reqImg: [],
      },
      rules: {
        sucReqRemark: [
          { required: true, message: '充值补单备注为必填项', trigger: 'blur' },
          { max: 45, message: '不能超过45个字符' },
        ],
        reqImg: {
          required: true,
          message: '请上传图片',
          trigger: 'change',
        },
      },
      imgDialog: false, // 图片放大图弹框
      imgUrl: '', // 图片放大图地址
      listImg: [], // 图片数据
    };
  },
  watch: {
    'reqForm.reqImg': {
      handler() {
        this.$refs.refForm.validateField('reqImg');
      },
    },
    rowData: {
      handler(newVal) {
        if (!_.isEmpty(newVal)) {
          if (this.isCheck) {
            this.listImg = newVal.reqImg.split('|').filter(item => (item && item !== 'null' && item !== 'undefined'));
          }
        }
        if (this.isCheck) {
          this.reqForm.sucReqRemark = this.rowData.sucReqRemark;
        }
      },
      immediate: true,
    },
  },
  methods: {
    imageSuccessCBK(arr) {
      this.reqForm.reqImg = [];
      if (!_.isEmpty(arr)) {
        arr.forEach((picInfo) => {
          if (picInfo.url) {
            this.reqForm.reqImg.push(picInfo);
          }
        });
      }
    },
    deleteImgEle(id) {
      const index = _.findIndex(this.reqForm.reqImg, { uid: id });
      delete this.reqForm.reqImg.splice(index, 1);
    },
    openImagDialog(url) {
      this.imgDialog = true;
      this.imgUrl = url;
    },
    rejectSupplyOrder() {
      this.rules.reqImg = {
        required: false,
        message: '请上传图片',
      };
      this.doSave({ action: 'saveRefForm', form: 'refForm' });
    },
    reqSupplyOrder() {
      this.rules.reqImg = {
        required: true,
        message: '请上传图片',
      };
      this.doSave({ action: 'saveForm', form: 'refForm' });
    },
  },
  components: {
    EditorImage,
  },
  mounted() {
    this.bindGet(getThirdStatus, 'result', {
      action: 'toGetThirdStatus',
      beforeSend: data => ({
        orderId: this.rowData.orderId,
      }),
      callback: ([result, data]) => {
        this.isClick = true;
        if (result) {
          // console.log(JSON.stringify(data));
          if (data) {
            this.rowData.thirdStatus = data.status;// 三方状态
            this.rowData.thirdOrderId = data.thirdOrderId;// 三方订单号
            this.rowData.thirdAmount = data.amount;// 三方实际金额
          } else {
            this.rowData.thirdStatus = '--';// 三方状态
            this.rowData.thirdOrderId = '--';// 三方订单号
            this.rowData.thirdAmount = '--';// 三方实际金额
          }
        } else {
          this.$message({
            type: 'error',
            message: data.message,
          });
        }
      },
    });
    this.bindSave(applySingleReorder, 'saveForm', 'reqForm', {
      beforeSend: (data) => {
        const { sucReqRemark } = data;
        const { orderId } = this.rowData;
        // const [fileFirst, fileSecond, fileThird] = data.reqImg.map(item => item.url);
        const attachments = data.reqImg.map(item => item.url).join(',');
        return {
          orderId,
          amount: this.form.amount,
          sucReqRemark,
          // fileFirst,
          // fileSecond,
          // fileThird,
          attachments,
        };
      },
      afterSuccess: () => {
        this.$emit('input', false);
        this.$parent.gridSearch();
      },
    });
    this.bindSave(refusedSingleReorder, 'saveRefForm', 'rowData', {
      beforeSend: (data) => {
        const { orderId, sucReqRemark } = data;
        return {
          orderId,
          remark: sucReqRemark,
        };
      },
      afterSuccess: () => {
        this.$emit('input', false);
        this.$parent.gridSearch();
      },
    });
    // this.rowData = _.map(this.rowData, (item) => {
    this.rowData.thirdStatus = null;// 三方状态
    this.rowData.thirdOrderId = '';// 三方订单号
    this.rowData.thirdAmount = null;// 三方实际金额
    // });
  },
};
</script>

<style lang="scss" scoped>
  .img-container{
    .image {
      position:relative;
      display: inline-block;
      width: 180px;
      height:111px;
      margin-top: 20px;
      margin-bottom:10px;
      margin-right: 13px;
      &:hover{
        .close{
          display: inline-block;
        }
      }
      .close{
        position:absolute;
        right: -8px;
        top:-15px;
        width: 30px;
        height: 30px;
        background: white;
        text-align: center;
        border-radius: 50%;
        box-shadow: 0px 2px 10px #171717;
        color:#1c53de;
        cursor: pointer;
        display: none;
      }
      img{
        width:100%;
        height:100%;
      }
    }
  }
  .img-list{
    .image {
      width: 180px;
      height:111px;
      margin-bottom:10px;
      margin-right: 13px;
    }
  }
  /deep/ {
    .img_detail {
      .el-dialog__header {
        display: none;
      }
      .el-dialog__body{
        padding: 0px;
        font-size: 0px;
      }
      img {
        width: 100%;
      }
    }
  }
.req_supply_order{
      display: inline-block;
}
</style>
